<template>
	<view class="option_item_wrap">
		<view class="icon_box">
			<CustomIcon class="z_icon" :name="props.iconName" width="24" height="24"></CustomIcon>
		</view>
		<view class="title_box">{{ props.title }}</view>
		<view class="right_icon_box">
			<CustomIcon class="f_icon" name="arrows_right_gray" width="16" height="16" :ikey="props.ikey"></CustomIcon>
		</view>
	</view>
</template>

<script>
import { defineComponent,ref,onMounted,computed } from 'vue';
export default defineComponent({
  name: 'OptionItem',
});
</script>
<script setup>
	import CustomIcon from '../../../../components/icon/customicon.vue'
	
	const props = defineProps(['title','iconName','ikey'])
	
	onMounted(()=>{
		console.log(props.ikey);
	})

</script>

<style lang="scss" scoped>
	.option_item_wrap{
		width: 100vw;
		height:60px;
		// border: 1px solid red;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		line-height: 60px;
		
		.icon_box{
			margin-left: 20px;
			
			.z_icon{
				position: relative;
				top: 6px;
			}
		}
		
		.title_box{
			font-size: 18px;
			margin-left: 12px;
		}
		
		.right_icon_box{
			position: absolute;
			top: 0;
			right:16px;
			
			.f_icon{
				position: relative;
				top: 4px;
			}
		}
	}
</style>
